<template>
  <div class="store">
    <StoreNav
      :shop="shopInfo"
      @search="storeSearch"
    />
    <el-tabs
      v-model="tabs.activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane label="店铺首页" name="index" />
      <el-tab-pane label="所有商品" name="all" />
      <el-tab-pane
        v-for="item in shopClassifyList"
        :key="item.classifyId"
        :name="item.classifyId.toString()"
        :label="item.classifyName"
      />
    </el-tabs>
    <div v-if="tabs.isHomePage && !tabs.isActivityPage">
      <CanvasPage
        v-if="shopInfo.shopId"
        :terminal="4"
        :typeId="3"
        :shopId="shopInfo.shopId"
      />
    </div>
    <div v-if="!tabs.isHomePage && !tabs.isActivityPage">
      <img
        v-if="banner"
        class="banner"
        :src="banner"
        alt="banner"
      />
      <div class="content">
        <div class="sort">
          <div>排序：</div>
          <div class="default" :class="sort.type === 1?'active':''" @click="defaultSort()">默认</div>
          <div class="price" :class="sort.type === 2?'active':''" @click="priceSort()">
            价格
            <div class="arr">
              <div class="up" :class="sort.price === 1?'low':''"></div>
              <div class="down" :class="sort.price===2?'high':''"></div>
            </div>
          </div>
          <div class="sales" :class="sort.type === 3?'active':''" @click="salesSort()">
            销量
            <div class="arr">
              <div class="up" :class="sort.type === 3 && sort.sales==1 ? 'low' : ''"></div>
              <div class="down" :class="sort.type === 3 && sort.sales==2 ? 'high':''"></div>
            </div>
          </div>
        </div>
        <div v-loading="loading.list">
          <div v-if="productList && productList.length">
            <h3>{{ tabs.activeTitle }}</h3>
            <ProductList :productList="productList" />
          </div>
          <div class="noproduct" v-else>
            <svg-icon
              style="
                  width: 240px;
                  height: 240px;
                  margin-bottom: 20px;
                "
              name="user-order-nodata"
            />
            <p class="fs20 font-color-999">暂时没有商品～</p>
          </div>
        </div>
        <el-pagination
          :hide-on-single-page="true"
          :current-page="page.page"
          :page-size="page.pageSize"
          :total="page.total"
          @current-change="handleCurrentChange"
          background layout="prev, pager, next"
        />
      </div>
      <router-view v-if="tabs.isActivityPage" />
    </div>
  </div>
</template>
<script setup>
import { defineComponent, onBeforeMount, reactive, ref, shallowRef, watch } from 'vue'

import { useRouter } from 'vue-router'
import CanvasPage from '@/components/canvasShow/canvasShowPage'
import StoreNav from '@/views/store/storeNav.vue'
import ProductList from '@/components/base/productList'
import SvgIcon from '@/components/svgIcon/index.vue';
import {
  getShopIndex,
  getShopClassify,
  getShopProducts,
  getShopBanner
} from '@/api/shop.js'
import { useShop } from '@/store/shop'

defineComponent({
  name: 'SotreIndex'
});
const router = useRouter()
const shopStore = useShop()
const banner = shallowRef('')
/**
 * tabs选项卡相关字段
 * @property {boolean} activeName tabs当前激活name
 * @property {boolean} activeTitle tabs当前激活title
 * @property {boolean} isHomePage 是否首页
 * @property {boolean} isActivityPage 是否活动页
 */
const tabs = reactive({
  activeName: 'index',
  activeTitle: '',
  isHomePage: true,
  isActivityPage: false,
});
/**
 * 组件loading管理
 * @property {boolean} list 分类查询 列表loading
 */
const loading = reactive({
  list: false,
});
const page = reactive({
  page: 1,
  pageSize: 12,
  total: 0,
});
/**
 * sort 排序相关字段
 * @property {numebr} type 排序类型 1 默认 2 价格 3 销量
 * @property {numebr} price 价格排序 1 升序 2 降序
 * @property {numebr} sales 销量排序 1 升序 2 降序
 */
const sort = reactive({
  type: 1,
  price: null,
  sales: null
});
const shopInfo = ref({
  shopId: null,
  shopName: null,
  shopLogo: null,
  shopAdress: null,
  ifCollect: 0
});
// 店铺分类数据
const shopClassifyList = ref([]);
// 店铺商品数据
const productList = ref([]);

// 获取店铺首页
function getShopIndexPage () {
  getShopIndex({
    shopId: shopInfo.value.shopId
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      formateShop(res)
      shopStore.setCollectData({
        ifCollect: res.data.ifCollect,
        collectId: res.data.collectId,
        shopAdress: res.data.shopAdress,
        shopName: res.data.shopName,
        shopId: res.data.shopId,
        classifyNumber: res.data.classifyNumber,
        number: res.data.number,
        shopLogo: res.data.shopLogo
      })
    }
  }).catch(err => ElMessage.error(err.message))
}
// 获取店铺分类
function getShopClassifyData () {
  getShopClassify({
    shopId: shopInfo.value.shopId
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      shopClassifyList.value = res.data.filter(item => JSON.stringify(item) !== '{}')
    }
  }).catch(err => ElMessage.error(err.message))
}
// 获取店铺banner
function getShopBannerData () {
  getShopBanner({
    shopId: shopInfo.value.shopId
  }).then(response => {
    const res = response.data
    if (res.code === '200') {
      if (res.data.length > 0) {
        banner.value = res.data[0].bannerImage
      }
    }
  }).catch(err => ElMessage.error(err.message))
}
// 获取店铺商品
function getShopProductsData () {
  loading.list = true
  let params = {
    shopId: shopInfo.value.shopId,
    type: sort.price,
    volume: sort.sales,
    page: page.page,
    pageSize: page.pageSize
  }
  if (tabs.activeName !== 'all') {
    params.groupId = tabs.activeName
  }
  getShopProducts(params).then(response => {
    const res = response.data
    if (res.code === '200') {
      productList.value = res.data && res.data.page && res.data.page.list
      console.log(parseInt(res.data.page.total), 'total')
      page.total = parseInt(res.data.page.total)
      // this.formateShop(res)
    }
  }).catch(err => ElMessage.error(err.message))
    .finally(() => {
      loading.list = false
    })
}
// 头部数据
function formateShop (res) {
  shopInfo.value = {
    shopId: res.data.shopId,
    shopName: res.data.shopName,
    shopLogo: res.data.shopLogo,
    shopAdress: res.data.shopAdress,
    ifCollect: res.data.ifCollect
  }
}
// 分类切换
function handleClick (event) {
  tabs.activeName = event.paneName
  tabs.activeTitle = event.props.label
  if (event.paneName === 'index') {
    tabs.isActivityPage = false
    tabs.isHomePage = true
  } else {
    tabs.isActivityPage = false
    tabs.isHomePage = false
    getShopProductsData()
  }
}
// 分页器跳转
function handleCurrentChange (val) {
  page.page = val
  getShopProductsData()
}
// 默认排序
function defaultSort () {
  page.page = 1

  sort.type = 1
  sort.price = null
  sort.sales = null
  getShopProductsData()
}
// 价格排序
function priceSort () {
  sort.type = 2
  sort.price = sort.price !== 1 ? 1 : 2
  sort.sales = null

  page.page = 1
  getShopProductsData()
}
// 销量排序
function salesSort () {
  sort.type = 3
  sort.sales = sort.sales !== 1 ? 1 : 2
  sort.price = null
  page.page = 1
  getShopProductsData()
}
// 店铺搜索
function storeSearch (val) {
  if (!val) {
    return ElMessage.warning('请输入搜索内容')
  }
  tabs.activeName = 'all'
  let params = {
    shopId: shopInfo.value.shopId,
    search: val,
    page: page.page,
    pageSize: page.pageSize
  }
  tabs.isHomePage = false
  getShopProducts(params).then(response => {
    const res = response.data
    if (res.code === '200') {
      productList.value = res.data.page.list
      // this.formateShop(res)
    }
  })
}

watch(
  () => router,
  (to, from) => {
    if (to.query.shopId !== from.query.shopId) {
      shopInfo.value.shopId = parseInt(to.query.shopId)
      router.go(0)
    }
  }
)
onBeforeMount(() => {
  shopInfo.value.shopId = parseInt(router.currentRoute.value.query.shopId)
  getShopIndexPage()
  getShopClassifyData()
  getShopBannerData()
})
</script>
<style lang="scss" scoped>
.store {
  width: 100%;
  //text-align: center;
  padding-bottom: 143px;
  :deep(.el-tabs){
    width: 1200px;
    margin: 0 auto;
    margin-bottom: 10px;
    .el-tabs__item.is-active{
      color: $mainGlod;
    }
    .el-tabs__active-bar{
      background-color: $mainGlod
    }
    .el-tabs__item{
      font-size: 16px;
    }
    .el-tabs__item:hover{
      color: $mainGlod
    }
    .el-tabs__nav-wrap::after{
      display: none;
    }
  }
  .banner{
    width: 100%;
    height: 356px;
    margin-bottom: 25px;
  }
  .content{
    width: 1200px;
    margin: 0 auto;
    padding: 0 0 30px;
    box-sizing: border-box;
    .sort {
      width: 100%;
      height: 63px;
      line-height: 27px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #f1f1f1;
      color: #666666;
      margin-bottom: 50px;
      .default {
        margin-left: 20px;
        cursor: pointer;
      }
      .sales {
        display: flex;
        cursor: pointer;
        img{
          width: 9px;
          height: 16px;
          vertical-align: middle;
        }
      }
      .price {
        display: flex;
        margin: 0 20px;
        cursor: pointer;
      }
      .arr {
        vertical-align: middle;
        width: 12px;
        margin-left: 3px;
        .up {
          width: 0;
          height: 0;
          border: 6px solid transparent;
          border-bottom-color: #999999;
        }
        .down {
          width: 0;
          height: 0;
          border: 6px solid transparent;
          border-top-color: #999999;
          margin-top: 3px;
        }
      }
      .active{
        color: $mainGlod;
        .arr{
          .high{
            border-top-color: $mainGlod;
          }
          .low{
            border-bottom-color: $mainGlod;
          }
        }
      }
    }
    h3{
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 80px;
    }
    .noproduct{
      width: 100%;
      text-align: center;
      padding: 200px 0;
    }
  }
  :deep(.el-pagination){
    text-align: right;
    justify-content: flex-end;
    .el-pager{
      li:not(.disabled):hover{
        color: $mainGlod;
      }
      li:not(.disabled).active{
        background-color: $mainGlod;
      }
      li:not(.disabled).active:hover{
        color: #F4F4F5;
      }
    }
  }
}
</style>
